<template>
	<view class="inline-flex row-center text-hide">
		<view
			class="inline-block"
			hover-start-time="0"
			hover-stay-time="50"
			:hover-class="innerValue <= min ? '' : 'opacity-50'"
			@click="calc(-1)"
		>
			<text
				class="iconfont icon-jianshao"
				:class="[innerValue <= min || disabled ? 'color-disable' : 'color-secondary']"
			/>
		</view>
		<input
			class="text-title w-10 border-box px-1-3 text-center"
			:class="[disabled ? 'color-disable' : 'color-main']"
			:disabled="disabled"
			v-model="innerValue"
			type="number"
			@blur="blur"
		/>
		<view
			class="inline-block"
			hover-start-time="0"
			hover-stay-time="50"
			:hover-class="innerValue >= max ? '' : 'opacity-50'"
			@click="calc(1)"
		>
			<text class="iconfont icon-tianjia" :class="[innerValue >= max || disabled ? 'color-disable' : 'color-active']" />
		</view>
	</view>
</template>
<script>
import { ref, watch } from 'vue';
export default {
	props: {
		modelValue: Number,
		min: {
			default: 1,
			type: Number,
		},
		max: {
			default: 10,
			type: Number,
		},
		setp: {
			default: 1,
			type: Number,
		},
		disabled: Boolean,
	},
	setup(props, ctx) {
		const innerValue = ref(0);
		handleValue(props.modelValue);
		watch(innerValue, (v) => {
			ctx.emit('update:modelValue', v);
		});
		watch(
			() => props.modelValue,
			(v) => {
				innerValue.value = v;
			}
		);
		function handleValue(val) {
			if (!val && val !== 0) {
				val = props.min;
			}
			if (val < props.min) {
				val = props.min;
			} else if (val > props.max) {
				val = props.max;
			}
			innerValue.value = val;
		}
		function calc(d) {
			if(props.disabled) return;
			handleValue(+innerValue.value + d);
		}
		function blur() {
			handleValue(+innerValue.value);
		}
		return {
			innerValue,
			calc,
			blur,
		};
	},
};
</script>
